<template>
  <el-card shadow="always" class="operator">
    <div>
      <div
        style="
          margin: 20px 0px 0px 20px;
          display: flex;
          justify-content: space-between;
        ">
        <div><span>描述文件</span></div>
        <div>
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入名称搜索"
            style="width: 200px; margin-right: 20px" />
          <!-- <el-select
            v-model="value"
            placeholder="请选择类型"
            size="mini"
            style="margin-right: 20px">
            <el-option label="全部" :value="0"></el-option>
            <el-option label="类别1" :value="1"></el-option>
            <el-option label="类别2" :value="2"></el-option>
          </el-select>
          <el-select
            v-model="tagValue"
            placeholder="请选择标签"
            size="mini"
            style="margin-right: 20px">
            <el-option label="全部" :value="0"></el-option>
            <el-option
              v-for="item in tagItem"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select> -->
          <el-button type="primary" size="mini" @click="handleSearch">
            查询
          </el-button>
          <el-button
            type="primary"
            size="mini"
            style="margin-right: 120px"
            @click="onAdd">
            新增
          </el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 50px"
        @row-click="handleClick">
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="type_text" label="类型"> </el-table-column>
        <!-- <el-table-column prop="dataLength" label="数据长度"> </el-table-column>
        <el-table-column prop="frameHeader" label="帧头"> </el-table-column>
        <el-table-column prop="endOfFrame" label="帧尾"> </el-table-column> -->
        <el-table-column prop="createtime" label="时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editRow(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="details(scope.row)"
              >详情</el-button
            >
            <template>
              <el-popconfirm
                title="确定删除吗？"
                @confirm="deleteRow(scope.row)">
                <el-button
                  type="text"
                  size="small"
                  style="color: red; margin-left: 10px"
                  slot="reference"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
            <!-- <el-button
              type="text"
              size="small"
              style="color: red"
              @click="deleteRow(scope.row)">
              删除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <Customdialog
        v-if="dialogOptions.visible"
        :options="dialogOptions"
        :row="currentRow"
        @onEditClose="onEditClose"
        @onAddClose="onAddClose" />
    </div>
    <!-- 详情弹窗 -->
    <div>
      <Customdialog2
        v-if="dialogOptions2.visible"
        :options="dialogOptions2"
        :row="currentRow"
        :meta_id="meta_id"
        @onEditClose="onEditClose2"
        @onAddClose="onAddClose2" />
      <el-dialog
        title="描述文件详情"
        :visible.sync="dialogTableVisible"
        class="dialog2"
        width="50%">
        <div style="display: flex; align-items: center">
          <div>
            <span style="font-weight: 600">名称:</span>
            <span style="margin: 0px 50px 0px 5px">
              {{ detailsdata.name }}</span
            >
          </div>
          <div>
            <span style="font-weight: 600">类型:</span>
            <span style="margin: 0px 50px 0px 5px">
              {{ detailsdata.type_text }}</span
            >
          </div>
          <!-- <div>
            <span style="font-weight: 600">数据长度:</span>
            <span style="margin: 0px 50px 0px 5px">
              {{ detailsdata.dataLength }}</span
            >
          </div>
          <div>
            <span style="font-weight: 600">帧头:</span>
            <span style="margin: 0px 50px 0px 5px">
              {{ detailsdata.frameHeader }}</span
            >
          </div>
          <div>
            <span style="font-weight: 600">帧尾:</span>
            <span style="margin: 0px 50px 0px 5px">
              {{ detailsdata.endOfFrame }}</span
            >
          </div> -->
          <div style="margin-left: auto">
            <el-button
              type="primary"
              size="mini"
              style="margin-right: 120px"
              @click="onAdd2">
              新增
            </el-button>
          </div>
        </div>
        <el-table :data="gridData">
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="name" label="字段信息"> </el-table-column>
          <el-table-column prop="code" label="字段key"> </el-table-column>
          <el-table-column prop="type" label="类型"> </el-table-column>
          <!-- <el-table-column prop="length" label="长度"> </el-table-column>
          <el-table-column prop="analysisType" label="解析类型">
          </el-table-column>
          <el-table-column prop="fieldParameters" label="字段参数">
          </el-table-column>
          <el-table-column prop="readType" label="读取类型"> </el-table-column>
          <el-table-column prop="otherInformation" label="其它信息">
          </el-table-column> -->

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="editRow2(scope.row)"
                >编辑</el-button
              >
              <template>
                <el-popconfirm
                  title="确定删除吗？"
                  @confirm="deleteRow2(scope.row)">
                  <el-button
                    type="text"
                    size="small"
                    style="color: red; margin-left: 10px"
                    slot="reference"
                    >删除</el-button
                  >
                </el-popconfirm>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
    <!-- 页码 -->
    <el-pagination
      style="margin-top: 10px"
      layout="total,  prev, pager, next, jumper"
      :pageSize="pagination.pageSize"
      :total="pagination.total"
      :pageSizes="pagination.pageSizes"
      @current-change="pageChange"
      @size-change="sizesChange">
    </el-pagination>
  </el-card>
</template>

<script>
  import Customdialog from "./components/index.vue";
  import Customdialog2 from "./components/index2.vue";

  export default {
    components: {
      Customdialog,
      Customdialog2,
    },
    data() {
      return {
        currentRow: null,
        meta_id: null,
        // 详情
        gridData: [
          {
            name: "text",
            code: "text",
            type: "text",
          },
          {
            name: "text",
            code: "text",
            type: "text",
          },
        ],
        dialogTableVisible: false,
        dialogOptions: {
          title: "",
          visible: false,
          size: "small-dialog-box",
        },
        dialogOptions2: {
          title: "",
          visible: false,
          size: "small-dialog-box",
        },
        // 描述文件数据
        tableData: [
          {
            id: 1,
            name: "描述文件名称1",
            type: "类型",
            createtime: "2024-09-18 14:38",
          },
          {
            id: 2,
            name: "描述文件名称2",
            type: "类型",
            createtime: "2024-09-18 14:38",
          },
          {
            id: 3,
            name: "描述文件名称3",
            type: "类型",
            createtime: "2024-09-18 14:38",
          },
          {
            id: 4,
            name: "描述文件名称4",
            type: "类型",
            createtime: "2024-09-18 14:38",
          },
        ],
        //标签
        tagValue: 0,
        tagItem: [
          { id: 2, name: "test1" },
          { id: 3, name: "test2" },
        ],
        detailsdata: {
          name: null,
          createtime: null,
        },
        // 类型
        value: 0,
        search: "",
        searchtype: null,
        // 分页参数
        pagination: {
          pageSize: 10,
          pageSizes: [10, 20],
          currentPage: 1,
          total: 50,
          layout: "total, sizes, prev, pager, next, jumper",
          onSizeChange: this.onSizeChange,
          onCurrentChange: this.onCurrentChange,
          order_field: "",
          order_type: "",
        },
      };
    },
    created() {
      this.init();
    },
    watch: {},
    methods: {
      init() {
        this.getAll();
        // this.getMetall();
      },
      //查询所有描述文件字段
      getMetall(params) {
        let result = window.iMetaItem.getAllMetafield(params);
        let res = JSON.parse(result);
        this.gridData = res.data;
      },
      //分页查询描述文件数据
      getAll(params) {
        let obj = { params };
        let itemJosn = JSON.stringify(obj);
        let result = window.iMeta.findMetaList(
          itemJosn,
          this.pagination.currentPage,
          this.pagination.pageSize
        );
        let res = JSON.parse(result);
        this.tableData = res.data.dataList;
        this.pagination.total = res.data.total;
      },
      //搜索
      handleSearch() {
        let params = { name: this.search };
        let itemJosn = JSON.stringify(params);
        let result = window.iMeta.findMetaList(
            itemJosn,
            this.pagination.currentPage,
            this.pagination.pageSize
        );
        let res = JSON.parse(result);
        this.tableData = res.data.dataList;
        this.pagination.total = res.data.total;
      },

      handleClick(row) {
        // console.log(row);
      },
      //新增
      onAdd() {
        this.dialogOptions.title = "新增";
        this.dialogOptions.visible = true;
        this.currentRow = null;
      },
      //编辑
      editRow(row) {
        this.currentRow = row;
        // console.log("🚀 ~ editRow ~  this.currentRow :", this.currentRow);
        this.dialogOptions.title = "编辑";
        this.dialogOptions.visible = true;
      },
      //详情
      details(row) {
        console.log("🚀 ~ details ~ row:", row);
        this.getMetall(row.id);
        this.meta_id = row.id;
        // console.log("🚀 ~ details ~ this.meta_id:", this.meta_id);
        this.currentRow = row;
        this.detailsdata = row;
        this.dialogTableVisible = true;
      },
      // 删除
      deleteRow(row) {
        console.log("🚀 ~ deleteRow ~ scope:", row);
        var result = window.iMeta.deleteMeta(row.id);
        let res = JSON.parse(result);
        if (res.code == 1) {
          this.$message.success(res.msg);
          let newPageing = Math.ceil(
            (this.pagination.total - 1) / this.pagination.pageSize
          ); //Math.ceil向上取整算出新的分页
          let currentPage =
            this.pagination.currentPage > newPageing
              ? newPageing
              : this.pagination.currentPage; //计算当前页应该是哪页
          this.pagination.currentPage = currentPage < 1 ? 1 : currentPage; //把当前页的值赋给this.page,重新渲染列表
          // this.getAll();
        } else {
          this.$message.error(res.msg);
        }
        this.getAll();
        // this.tableData = this.tableData.filter((item) => item !== row);
      },
      onEditClose(data) {
        console.log("🚀 ~ onEditClose ~ data:", data);
        this.currentRow = data;
        if (data) {
          const params = JSON.stringify(data);
          let result = window.iMeta.updateMeta(params);
          let res = JSON.parse(result);
          if (res.code == 1) {
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
          this.getAll();
        } else {
          this.currentRow = null;
        }
        this.dialogOptions.visible = false;
        // console.log("🚀 ~ onEditClose ~ this.currentRow:", this.currentRow);
        // if (data) {
        //   // const params = JSON.stringify(data);
        //   // console.log("🚀 ~ onEditClose ~ params:", params);
        //   // var data = iArea.editArea(params);
        //   // var res = JSON.parse(data);
        //   // // this.$message.success(res.msg);
        //   // this.$message({
        //   //   message: res.msg,
        //   //   type: "success",
        //   //   duration: 1000,
        //   // });
        //   // console.log("🚀 ~ onEditClose ~ res:", res);
        //   // // 刷新列表
        //   // this.getData();
        // } else {
        //   this.currentRow = null;
        //   this.dialogOptions.visible = false;
        // }
      },
      onAddClose(data) {
        console.log("🚀 ~ onAddClose ~ data:", data);
        // this.tableData.push(data);
        if (data) {
          const params = JSON.stringify(data);
          let result = window.iMeta.addMeta(params);
          let res = JSON.parse(result);
          if (res.code == 1) {
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
          this.getAll();
        }
        this.dialogOptions.visible = false;
      },

      // 新增描述文件字段
      onAdd2() {
        this.dialogOptions2.title = "新增";
        this.dialogOptions2.visible = true;
        this.currentRow = null;
      },
      //编辑描述文件字段
      editRow2(row) {
        this.currentRow = row;
        // console.log("🚀 ~ editRow ~  this.currentRow :", this.currentRow);
        this.dialogOptions2.title = "编辑";
        this.dialogOptions2.visible = true;
      },
      // 删除描述文件字段
      deleteRow2(row) {
        console.log("🚀 ~ deleteRow ~ scope:", row);
        var result = window.iMetaItem.deleteMetafield(row.id);
        let res = JSON.parse(result);
        if (res.code == 1) {
          this.$message.success(res.msg);
          let newPageing = Math.ceil(
            (this.pagination.total - 1) / this.pagination.pageSize
          ); //Math.ceil向上取整算出新的分页
          let currentPage =
            this.pagination.currentPage > newPageing
              ? newPageing
              : this.pagination.currentPage; //计算当前页应该是哪页
          this.pagination.currentPage = currentPage < 1 ? 1 : currentPage; //把当前页的值赋给this.page,重新渲染列表
          // this.getAll();
        } else {
          this.$message.error(res.msg);
        }
        this.getMetall(this.meta_id);
        // this.tableData = this.tableData.filter((item) => item !== row);
      },
      //编辑描述文件字段
      onEditClose2(data) {
        console.log("🚀 ~ onEditClose ~ data:", data);
        this.currentRow = data;
        if (data) {
          const params = JSON.stringify(data);
          let result = window.iMetaItem.updateMetafield(params);
          let res = JSON.parse(result);
          if (res.code == 1) {
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
          this.getMetall(data.meta_id);
        } else {
          this.currentRow = null;
        }
        this.dialogOptions2.visible = false;
        // console.log("🚀 ~ onEditClose ~ this.currentRow:", this.currentRow);
        // if (data) {
        //   // const params = JSON.stringify(data);
        //   // console.log("🚀 ~ onEditClose ~ params:", params);
        //   // var data = iArea.editArea(params);
        //   // var res = JSON.parse(data);
        //   // // this.$message.success(res.msg);
        //   // this.$message({
        //   //   message: res.msg,
        //   //   type: "success",
        //   //   duration: 1000,
        //   // });
        //   // console.log("🚀 ~ onEditClose ~ res:", res);
        //   // // 刷新列表
        //   // this.getData();
        // } else {
        //   this.currentRow = null;
        //   this.dialogOptions2.visible = false;
        // }
      },
      //添加描述文件字段
      onAddClose2(data) {
        console.log("🚀 ~ onAddClose ~ data:", data);
        // this.tableData.push(data);
        if (data) {
          const params = JSON.stringify(data);
          let result = window.iMetaItem.updateMetafield(params);
          let res = JSON.parse(result);
          if (res.code == 1) {
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
          this.getMetall(data.meta_id);
        }
        this.dialogOptions2.visible = false;
      },
      //当前页数监听
      pageChange(val) {
        console.log("🚀 ~ pageChange ~ val:", val);
        this.pagination.currentPage = val;
        this.getAll();
      },
      //每页条数监听
      sizesChange(val) {
        // console.log("🚀 ~ sizesChange ~ val:", val);
        // this.pagination.pageSize = val;
        // this.getAll();
      },
    },
  };
</script>
<style scoped>
  .operator {
    width: 100%;
    height: 98%;
  }
  :deep(.el-dialog) {
    width: 75%;
    /* padding-right: 30px; */
    border-radius: 15px;
  }
  /* :deep(.dialog2) {
    width: 70%;
    padding-right: 30px;
    border-radius: 15px;
  } */

  /* :deep .el-table__body,
  .el-table__footer,
  .el-table__header {
    width: 100% !important;
  } */
</style>
